<template>
  <div class="main">
    <div class="mainbox">
      <div class="mainbox-leftBox">
        <div class="mainbox-leftBox-nav">
          <!-- <div
            class="mainbox-leftBox-nav-top"
            style="padding: 0.05rem 0.13rem; min-height: 0.35rem"
          >
            <div style="display: flex; align-items: center; width: 100%">
              店铺筛选 <i class="el-icon-arrow-right"></i>
              <div style="display: flex; flex-wrap: wrap; max-width: 90%">
                <div
                  v-for="(tag, index) in tags"
                  :key="index"
                  style="margin-top: 0.05rem"
                >
                  <el-tag
                    @close="del(index, tag)"
                    v-if="tag"
                    style="margin-right: 0.1rem"
                    closable
                    type="danger"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
              </div>
            </div>

            <div
              style="width: 145px; text-align: right; cursor: pointer"
              @click="chongzhi"
            >
              <i class="el-icon-delete"></i> 清空筛选条件
            </div>
          </div> -->
          <div class="mainbox-leftBox-nav-bottom">
            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">选择市场</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  @click="getQbDq"
                  :class="form.market == '' ? 'redText' : ''"
                  style="padding: 0 0.1rem"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  全部
                </div>
                <div
                  @click="getSan(index, item)"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  :class="indexSan == index ? 'redText' : ''"
                  v-for="(item, index) in addressList"
                  :key="index"
                >
                  {{ item.value }}
                </div>
                <div
                v-if="addressListTow.length"
                  @click="showB = !showB"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  {{ showB ? "收起" : "更多" }}
                  <i
                    :class="showB ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  ></i>
                </div>
                <div
                  style="width: 100%; display: flex; flex-wrap: wrap"
                  v-if="showB"
                >
                  <div
                    @click="getSanB(index, item)"
                    :class="indexSanB == index ? 'redText' : ''"
                    class="mainbox-leftBox-nav-bottom-item-right-item"
                    v-for="(item, index) in addressListTow"
                    :key="index"
                  >
                    {{ item.value }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mainbox-leftBox-nav-bottom" style="border-top: none">
            <div class="mainbox-leftBox-nav-bottom-item">
              <div class="mainbox-leftBox-nav-bottom-item-left">字母分类</div>
              <div class="mainbox-leftBox-nav-bottom-item-right">
                <div
                  @click="getQb"
                  :class="form.letter == '' ? 'redText' : ''"
                  style="padding: 0 0.1rem"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  全部
                </div>
                <div
                  @click="getNum"
                  :class="form.letter == '0' ? 'redText' : ''"
                  style="padding: 0 0.1rem"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  数字0-9
                </div>
                <div
                  @click="getSi(item, index)"
                  style="padding: 0 0.1rem"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                  :class="indexSi == index ? 'redText' : ''"
                  v-for="(item, index) in zmList"
                  :key="index"
                >
                  {{ item }}
                </div>
                <!-- <div
                  @click="showB = !showB"
                  class="mainbox-leftBox-nav-bottom-item-right-item"
                >
                  {{ showB ? "收起" : "更多" }}
                  <i
                    :class="showB ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  ></i>
                </div>
                <div
                  style="width: 100%; display: flex; flex-wrap: wrap"
                  v-if="showB"
                >
                  <div
                    @click="getSanB(index, item)"
                    :class="indexSanB == index ? 'redText' : ''"
                    class="mainbox-leftBox-nav-bottom-item-right-item"
                    v-for="(item, index) in addressListTow"
                    :key="index"
                  >
                    {{ item.value }}
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>

        <div class="mainbox-leftBox-goods">
          <div
            class="mainbox-leftBox-goods-top"
            style="justify-content: space-between"
          >
            <div class="newbOXs">
              <div
                class="item"
                @click="getIconType('')"
                :class="newIndex == 0 ? 'newItem' : ''"
              >
                综合
              </div>
              <div
                class="item"
                @click="getIconType(1)"
                :class="newIndex == 1 ? 'newItem' : ''"
              >
                人气
              </div>
              <div
                class="item"
                @click="getIconType(2)"
                :class="newIndex == 2 ? 'newItem' : ''"
              >
                最新
              </div>
            </div>
            <div class="newRightBox">
              为您找到{{ total }}家商家
              <div class="newBox1">
                <span class="pageBox" style="color: #ff4400">{{
                  form.pageNumber
                }}</span>
                / {{ pages }}
              </div>
              <div class="newBtnBox">
                <div
                  class="newBtnBoxS huiBtN"
                  v-if="form.pageNumber == 1"
                  style="border-right: 1px solid #e8e8e8"
                >
                  上一页
                </div>
                <div
                  class="newBtnBoxS"
                  @click="qianBtn"
                  v-else
                  style="border-right: 1px solid #e8e8e8"
                >
                上一页
                </div>
                <div class="newBtnBoxS huiBtN" v-if="form.pageNumber == pages">
                 下一页
                </div>
                <div class="newBtnBoxS" @click="houBtn" v-else>下一页</div>
              </div>
            </div>
          </div>

          <div class="mainbox-leftBox-goods-medium" style="display: block">
            <div
              class="storeLIst"
              v-for="(item, index) in storeList"
              :key="index"
              @click="
                $router.push({
                  path: '/highshop',
                  query: {
                    id: item.id,
                  },
                })
              "
            >
              <div class="leftBoxs">
                <div class="titleBoxS">望江童装网认证商家</div>
                <!-- <div class="guanzhu">
                  {{ item.collection ? "已关注" : "未关注" }}
                </div> -->
                <div class="shopguanzhu" v-if="item.collection">
                  <img src="@/assets//image/shop/guanzhu.png" alt="" />
                  <span>已关注</span>
                </div>
                <div class="shopguanzhu" v-else @click="saveStoreCollection">
                  <img src="@/assets//image/shop/guanzhu.png" alt="" />
                  <span>关注店铺</span>
                </div>
              </div>
              <div class="middBoxs">
                <div class="storeName">{{ item.storeName }}</div>
                <div class="wangzhi">
                  <div class="wangzhiBox">店铺网址</div>
                  <el-button type="text" v-if="item.storeDomainName"
                    >http://www.{{ item.storeDomainName }}.wjtzw.cn</el-button
                  >
                </div>
                <div class="storeDataBox">
                  <div class="databOX databOXS">
                    商品数量：{{ item.storeSellProduct }}款
                  </div>
                  <div class="databOX">最近上新：{{ item.lastNewDate }}</div>
                </div>
                <div class="storeDataBox">
                  <div class="databOX databOXS">实名认证：已实名</div>
                  <div class="databOX">商家电话：{{ item.storePhone }}</div>
                </div>
                <div class="storeDataBox">
                  <div class="databOX databOXS">
                    商家地址：{{ item.storeAddressDetail }}
                  </div>
                  <div class="databOX">
                    联系方式：
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="item.storeVx"
                      placement="top"
                    >
                      <img
                        style="cursor: pointer"
                        src="@/assets/image/bottom/wx.png"
                        alt=""
                      />
                    </el-tooltip>
                    <!-- <el-tooltip
                      class="item"
                      effect="light"
                      :content="item.storeEmail"
                      placement="top"
                    >
                      <el-button size="mini">邮箱</el-button>
                    </el-tooltip> -->
                  </div>
                </div>
              </div>
              <div class="rightBoxS">
                <img
                  class="newImgBox"
                  @click="
                    $router.push({
                      path: '/detail',
                      query: {
                        id: item.idList[index1],
                      },
                    })
                  "
                  :src="item1"
                  v-for="(item1, index1) in item.productPictures"
                  :key="index1"
                  alt=""
                />
                <div class="newBox">
                  <div class="moreBox">更多</div>
                  <div class="more">more>></div>
                </div>
              </div>
            </div>
          </div>

          <div class="mainbox-leftBox-goods-bottom">
            <el-pagination
              background
              style="font-size: 0.16rem"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="20"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { selectAllCondition } from "@/api/commodity";
import { saveStoreCollection } from "@/api/MyCollection";
import {
  selectAllByParams,
  selectAllStoreByParams,
} from "@/api/seller/cangpushop";
export default {
  components: {},

  data() {
    return {
      zmList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      adData: [],
      input1: "",
      newIndex: 0,
      indexWu: null,
      indexSi: null,
      indexSan: null,
      indexSanB: null,
      tags: [],
      total: null,
      form: {
        pageNumber: 1,
        pageSize: 20,
        type: "",
        storeName: "",
        market: "",
        letter: "",
      },
      showC: false,
      indexTowB: null,
      indexTow: null,
      indexOne: null,
      show: false,
      popularitylist: [],
      middlelist: [],
      tongzhuang: [],
      tongzhuangIndex: -1,
      typelist: [],
      typelistTow: [],
      addressList: [],
      priceList: [],
      basicProps: [],
      maybeFind: [],
      input: "",
      currentPage: 1,
      addressListTow: [],
      showB: false,
      basicPropsTow: [],
      shopList: [],
      arr: [],
      storeList: [],
      indexSi: null,
      pages:null
    };
  },
  created() {
    if (this.$route.query.goodsName) {
      this.form.storeName = this.$route.query.goodsName;
    }
    this.selectAllStoreByParams();
    this.selectAllCondition();
  },
  activated() {
    if (this.$route.query.goodsName) {
      this.form.storeName = this.$route.query.goodsName;
    }
    //   this.selectAllByParams();
    //   this.selectAllByParams();
  },
  methods: {
    // 收藏店铺
    saveStoreCollection() {
      const token = getToken();
      if (token) {
        saveStoreCollection({
          idList: `${this.storeData.id}`,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "关注成功",
              type: "success",
            });
            this.$parent.pmsStore(this.storeData.id);
          }
        });
      } else {
        this.$message({
          message: "请先登陆！",
          type: "warning",
        });
      }
    },
    // 选择综合人气排序
    getIconType(index) {
      this.newIndex = index;
      this.form.type = index + "";
      this.selectAllStoreByParams();
    },
    // 获取所有类目
    selectAllCondition() {
      selectAllCondition().then((data) => {
        this.addressList = data.data[1].item.slice(0, 8);
        this.addressListTow = data.data[1].item.slice(
          8,
          data.data[1].item.length - 1
        );
      });
    },
    //获取店铺
    selectAllStoreByParams() {
      selectAllStoreByParams(this.form).then((data) => {
        this.storeList = data.data.records;
        this.total = data.data.total;
        this.pages=data.data.pages
      });
    },
    // 重置
    chongzhi() {
      this.tags = [];

      this.form.pageNumber = 1;
      this.form.pageSize = 20;
      this.form.type = "";
      this.form.market = "";
      this.indexSanB = null;
      this.indexSan = null;
      this.selectAllStoreByParams();
    },
    del(index, item) {
      this.tags.splice(index, 1);
      this.indexSanB = null;
      this.indexSan = null;
      this.form.market = "";
      this.selectAllStoreByParams();
    },

    // 地区选中
    getSan(index, item) {
      this.indexSan = index;
      this.indexSanB = null;
      this.tags[2] = {
        name: `地区：${item.value}`,
        id: 2,
      };
      this.form.market = item.value;
      this.selectAllStoreByParams();
    },
    getQbDq() {
      this.indexSan = null;
      this.form.market = "";
      this.selectAllStoreByParams();
    },
    getSi(val, index) {
      this.form.letter = val;
      this.indexSi = index;
      this.selectAllStoreByParams();
    },
    getQb() {
      this.form.letter = "";
      this.indexSi = null;
      this.selectAllStoreByParams();
    },
    getNum() {
      this.form.letter = "0";
      this.indexSi = null;
      this.selectAllStoreByParams();
    },
    getSanB(index, item) {
      this.indexSan = null;
      this.indexSanB = index;
      this.tags[2] = {
        name: `地区：${item.value}`,
        id: 2,
      };
      this.form.market = item.value;
      this.selectAllByParams();
    },
    getOne(index, item) {
      this.indexOne = index;
      this.tags[0] = {
        name: `频道：${item.name}`,
        id: 0,
      };
      this.form.channelId = item.id;
      this.selectAllStoreByParams();
    },

    handleSizeChange(val) {
      this.form.pageSize = val;
      this.selectAllStoreByParams();
    },
    handleCurrentChange(val) {
      this.form.pageNumber = val;
      this.selectAllStoreByParams();
    },
      //上方前进一页
      qianBtn(){
      this.form.pageNumber=this.form.pageNumber-1
      this.currentPage=this.form.pageNumber
      this.selectAllStoreByParams();
    },
    houBtn(){
      this.form.pageNumber=this.form.pageNumber+1
      this.currentPage=this.form.pageNumber
      this.selectAllStoreByParams();
    },
  },

  watch: {
    $route() {
      if (this.$route.query.goodsName) {
        this.form.storeName = this.$route.query.goodsName;
        this.selectAllStoreByParams();
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.newbOXs {
  display: flex;
}
.newBox1 {
  margin: 0 5px;
  .pageBox {
    color: #ff4400;
  }
}
.newBtnBox {
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  background: #fff;
  display: flex;
  cursor: pointer;
  margin: 0 10px;
  .newBtnBoxS {
    width: 0.82rem;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
  }
  .huiBtN {
    background: #f8f8f8;
    cursor: not-allowed;
  }
}
.newRightBox {
  display: flex;
  align-items: center;
}
.storeLIst {
  width: 100%;
  border: 1px solid gainsboro;
  display: flex;
  justify-content: space-between;
  height: 2.2rem;
  .leftBoxs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
    border-right: 1px solid gainsboro;
    .titleBoxS {
      font-size: 14px;
      font-weight: 700;
    }
    .guanzhu {
      font-size: 14px;
      margin-top: 10px;
      color: #666;
    }
    .shopguanzhu {
      cursor: pointer;
      width: 0.8rem;
      height: 0.19rem;
      border-radius: 0.1rem;
      font-size: 0.12rem;
      color: #ec6c15;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.01rem solid #ec6c15;
      margin-top: 10px;
      img {
        width: 0.14rem;
        height: 0.14rem;
        margin-right: 0.05rem;
      }
    }
  }
  .middBoxs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid gainsboro;
    margin-left: 20px;
    width: 58%;
    .storeName {
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
    }
    .wangzhi {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .wangzhiBox {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        width: 68px;
        height: 24px;
        line-height: 24px;
        background: #ec6c15;
        border-radius: 4px;
        text-align: center;
        margin-right: 30px;
      }
    }
    .storeDataBox {
      display: flex;
      align-items: center;
      margin-top: 10px;
      font-size: 12px;
      color: #666;
      .databOX {
        margin-right: 10px;
        width: 40%;
        display: flex;
      }
      .databOXS {
        width: 60%;
      }
    }
  }
  .rightBoxS {
    width: 26%;
    display: flex;
    flex-wrap: wrap;
    .newImgBox {
      width: 0.72rem;
      height: 0.72rem;
      margin: 0.1rem;
      cursor: pointer;
    }
    .newBox {
      margin: 0.1rem;
      cursor: pointer;
      background: #e8e8e8;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 0.72rem;
      height: 0.72rem;
      .moreBox {
        font-size: 14px;
        color: #000000;
      }
      .more {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
::v-deep .el-carousel__arrow--left {
  border-radius: 0 0.2rem 0.2rem 0 !important;
  left: 0;
}
::v-deep .el-carousel__arrow--right {
  border-radius: 0.2rem 0 0 0.2rem !important;
  right: 0;
}
::v-deep .el-dropdown {
  font-size: 0.16rem !important;
}

.main {
  width: 100%;
  // height: 100%;
  background-color: #f5f7f9;
  .redText {
    color: #e22a1f !important;
  }
  .mainbox {
    margin: 0.3rem auto;
    width: 12rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    &-leftBox {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      &-nav {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        &-top {
          width: calc(100% - 0.26rem);
          padding: 0 0.13rem;

          font-size: 0.16rem;
          color: #666666;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          border: 1px solid #e8e8e8;
          border-bottom: none;
        }
        &-bottom {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          border: 1px solid #e8e8e8;
          &-item {
            width: 100%;
            min-height: 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: PingFang SC-Regular, PingFang SC;
            font-size: 0.16rem;
            &-left {
              width: 0.9rem;
              padding: 0 0.12rem;
              background: #f8f8f8;
              text-align: left;
              min-height: 0.4rem;
              line-height: 0.4rem;
              color: #999999;
              border-bottom: 1px solid #fdfdfd;
            }
            &-right {
              padding: 0 0.18rem;
              flex: 1;
              min-height: 0.4rem;
              background: #ffffff;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;
              &-item {
                width: auto;
                height: 0.3rem;
                padding: 0 0.18rem;
                color: #000000;
                text-align: center;
                line-height: 0.3rem;
                cursor: pointer;
              }
            }
          }
        }
      }
      &-goods {
        margin-top: 0.3rem;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        &-top {
          width: 100%;
          height: 0.6rem;
          display: flex;
          //justify-content: space-between;
          align-items: center;
          font-size: 0.16rem;
          color: #666666;
          background: #ffffff;
          border: 1px solid #e8e8e8;
          ::v-deep .el-input__inner {
            height: 0.22rem !important;
            padding: 0 !important;
          }
          .noborder {
            border-right: 0px !important;
          }
          .item {
            cursor: pointer;
            height: 0.6rem;
            line-height: 0.6rem;
            width: auto;
            padding: 0 0.15rem;
            display: flex;
            font-size: 0.13rem;
            align-items: center;
            position: relative;
            border-right: 1px solid #e8e8e8;
            .up {
              position: absolute;
              top: 0.1rem;
              left: 0.4rem;
              font-size: 13px;
              color: #d8d8d8;
              cursor: pointer;
            }
            .down {
              position: absolute;
              font-size: 13px;
              color: #d8d8d8;
              top: 0.2rem;
              left: 0.4rem;
              cursor: pointer;
            }
            .pagebutton {
              margin-left: 0.1rem;
              width: 0.36rem;
              height: 0.2rem;
              line-height: 0.2rem;
              text-align: center;
              color: #999999;
              background: #ffffff;
              box-sizing: border-box;
              border: 0.01rem solid #e8e8e8;
            }
          }
          .newItem {
            color: #fff;
            font-weight: bold;
            background: #e22a1f;
          }
          .search {
            width: auto;
            padding: 0 0.15rem;
            height: 0.4rem;
            font-size: 0.13rem;
            line-height: 0.4rem;
            display: flex;
            align-items: center;
            .inputStyle {
            }
            &-button {
              cursor: pointer;
              margin-left: 0.1rem;
              width: 0.5rem;
              height: 0.25rem;
              line-height: 0.22rem;
              text-align: center;
              background: #e3e3e3;
              box-sizing: border-box;
              border: 0.01rem solid rgba(0, 0, 0, 0);
            }
          }
        }
        &-medium {
          width: calc(100% - 0.2rem);
          padding: 0.1rem;
          background: #ffffff;
          height: auto;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }
        &-bottom {
          width: calc(100% - 0.2rem);
          padding: 0.1rem 0.1rem 0.3rem 0.1rem;
          background: #ffffff;
          height: 0.4rem;
          display: flex;
          justify-content: center;
          align-items: center;
          ::v-deep
            .el-pagination.is-background
            .el-pager
            li:not(.disabled).active {
            background-color: #e22a1f !important;
          }
          ::v-deep .el-pager li {
            width: 0.4rem !important;
            height: 0.4rem !important;
            line-height: 0.4rem !important;
            border-radius: 0.04rem !important;
          }

          ::v-deep .el-pagination span {
            height: 0.4rem !important;
            line-height: 0.4rem !important;
          }
          ::v-deep .el-pagination button {
            width: 0.4rem !important;
            height: 0.4rem !important;
            line-height: 0.4rem !important;
            border-radius: 0.04rem !important;
          }
        }
      }
    }
    &-rightBox {
      width: 2.2rem;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      &-top {
        width: 2.5rem;
        height: 0.56rem;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 0.9rem;
          margin-left: 0.2rem;
        }
        .righttext {
          margin-right: 0.26rem;
          color: #a7adb8;
          letter-spacing: 0.02rem;
          font-size: 0.14rem;
        }
      }
      &-adWei {
        margin-top: 0.1rem;
        width: 2.2rem;
        height: 3.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        .img {
          width: 2.2rem;
          height: 2.5rem;
        }
        .message {
          width: 2.2rem;
          flex: 1;
          margin-bottom: 0.1rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .price {
            width: 1.96rem;
            padding: 0 0.12rem;
            height: 0.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .priceNum {
              font-size: 0.16rem;
              color: #e22a1f;
            }
            .label {
              width: 0.64rem;
              height: 0.18rem;
              position: relative;
              .text {
                color: #ffffff;
                font-size: 0.12rem;
                z-index: 10;
                width: 0.64rem;
                height: 0.18rem;
                line-height: 0.18rem;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
              }
              .img {
                width: 0.64rem;
                height: auto;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
          }
          .msgItem {
            width: 1.96rem;
            padding: 0 0.12rem;
            flex: 1;
            text-align: left;
            color: #666666;
            font-size: 0.12rem;
            .num {
              color: #ff4d6d;
            }
          }
        }
      }
      &-recommend {
        margin-top: 0.1rem;
        width: 2.5rem;
        cursor: pointer;
        // height: 3.6rem;
        background: #ffffff;
      }
    }
  }
}
</style>
  <style>

.newdROP {
  display: flex;
  /* top: 816px !important; */
  /* max-width: 6rem !important; */
  flex-wrap: wrap;
}
</style>
  <style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .main {
    width: 100%;
    // height: 100%;
    background-color: #f5f7f9;
    .redText {
      color: #e22a1f !important;
    }
    .mainbox {
      margin: 0.3rem auto;
      width: 90%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      &-leftBox {
        width: 14.8rem;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        &-nav {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          &-top {
            width: calc(100% - 0.26rem);
            padding: 0 0.13rem;

            font-size: 12px;
            color: #666666;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            border: 1px solid #e8e8e8;
          }
          &-bottom {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            border: 1px solid #e8e8e8;
            &-item {
              width: 100%;
              min-height: 0.4rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              &-left {
                width: 0.86rem;
                padding: 0 0.12rem;
                background: #f8f8f8;
                text-align: left;
                min-height: 0.4rem;
                line-height: 0.4rem;
                color: #999999;
                border-bottom: 1px solid #fdfdfd;
              }
              &-right {
                padding: 0 0.18rem;
                flex: 1;
                min-height: 0.4rem;
                background: #ffffff;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                &-item {
                  width: auto;
                  height: 0.3rem;
                  padding: 0 0.15rem;
                  color: #000000;
                  text-align: center;
                  line-height: 0.3rem;
                  cursor: pointer;
                }
              }
            }
          }
        }
        &-goods {
          margin-top: 0.3rem;
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          &-top {
            width: 100%;
            height: 0.6rem;
            display: flex;
            //justify-content: space-between;
            align-items: center;
            font-size: 0.12rem;
            color: #666666;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            ::v-deep .el-input__inner {
              height: 0.22rem !important;
              padding: 0 !important;
            }
            .item {
              cursor: pointer;
              height: 0.6rem;
              line-height: 0.6rem;
              width: auto;
              padding: 0 0.15rem;
              display: flex;
              align-items: center;
              position: relative;

              .up {
                position: absolute;
                top: 0.05rem;
                left: 0.55rem;
                cursor: pointer;
              }
              .down {
                position: absolute;
                top: 0.18rem;
                left: 0.55rem;
                cursor: pointer;
              }
              .pagebutton {
                margin-left: 0.1rem;
                width: 0.36rem;
                height: 0.2rem;
                line-height: 0.2rem;
                text-align: center;
                color: #999999;
                background: #ffffff;
                box-sizing: border-box;
                border: 0.01rem solid #e8e8e8;
              }
            }
            .newItem {
              color: #e22a1f;
            }
            .search {
              width: auto;
              padding: 0 0.15rem;
              height: 0.4rem;
              line-height: 0.4rem;
              display: flex;
              align-items: center;
              &-button {
                margin-left: 0.1rem;
                width: 0.56rem;
                height: 0.2rem;
                line-height: 0.22rem;
                text-align: center;
                background: #e3e3e3;
                box-sizing: border-box;
                border: 0.01rem solid rgba(0, 0, 0, 0);
              }
            }
          }
          &-medium {
            width: calc(100% - 0.2rem);
            padding: 0.1rem;
            background: #ffffff;
            height: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }
          &-bottom {
            width: calc(100% - 0.2rem);
            padding: 0.1rem 0.1rem 0.3rem 0.1rem;
            background: #ffffff;
            height: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            ::v-deep
              .el-pagination.is-background
              .el-pager
              li:not(.disabled).active {
              background-color: #e22a1f !important;
            }
            ::v-deep .el-pager li {
              width: 0.4rem !important;
              height: 0.4rem !important;
              line-height: 0.4rem !important;
              border-radius: 0.04rem !important;
            }

            ::v-deep .el-pagination span {
              height: 0.4rem !important;
              line-height: 0.4rem !important;
            }
            ::v-deep .el-pagination button {
              width: 0.4rem !important;
              height: 0.4rem !important;
              line-height: 0.4rem !important;
              border-radius: 0.04rem !important;
            }
          }
        }
      }
      &-rightBox {
        width: 2.2rem;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-left: 20px;
        &-top {
          width: 2.2rem;
          height: 0.56rem;
          background: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img {
            width: 0.9rem;
            margin-left: 0.2rem;
          }
          .righttext {
            margin-right: 0.26rem;
            color: #a7adb8;
            letter-spacing: 0.02rem;
            font-size: 0.14rem;
          }
        }
        &-adWei {
          margin-top: 0.1rem;
          width: 2.2rem;
          height: 3.6rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          .img {
            width: 2.2rem;
            height: 2.5rem;
          }
          .message {
            width: 2.2rem;
            flex: 1;
            margin-bottom: 0.1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .price {
              width: 1.96rem;
              padding: 0 0.12rem;
              height: 0.4rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .priceNum {
                font-size: 0.16rem;
                color: #e22a1f;
              }
              .label {
                width: 0.64rem;
                height: 0.18rem;
                position: relative;
                .text {
                  color: #ffffff;
                  font-size: 0.12rem;
                  z-index: 10;
                  width: 0.64rem;
                  height: 0.18rem;
                  line-height: 0.18rem;
                  text-align: center;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                .img {
                  width: 0.64rem;
                  height: auto;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
              }
            }
            .msgItem {
              width: 1.96rem;
              padding: 0 0.12rem;
              flex: 1;
              text-align: left;
              color: #666666;
              font-size: 0.12rem;
              .num {
                color: #ff4d6d;
              }
            }
          }
        }
        &-recommend {
          margin-top: 0.1rem;
          width: 2.2rem;
          background: #ffffff;
        }
      }
    }
  }
}
</style>
  